import {Stack, Typography} from "@mui/material";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import React from "react";

const Line = ({dayOfWeek, config, workday, setWorkday, values = [], setValues, occupiedTimes, disabled}) => {

    const switchWorkday = (_, v) => {
        setWorkday(null, v);

        const available = config.available(v);
        const newValues = values.filter(value => available.includes(value));
        setValues(null, newValues);
    }

    return (
        <Stack spacing={2} direction="row" alignItems="center" justifyContent="flex-start">
            <Typography>{dayOfWeek.name}</Typography>

            <ToggleButtonGroup disabled={disabled} color="primary" size="small" exclusive value={workday}
                               onChange={switchWorkday}>
                <ToggleButton value={true}>工作日</ToggleButton>
                <ToggleButton value={false}>节假日</ToggleButton>
            </ToggleButtonGroup>

            <ToggleButtonGroup disabled={disabled} color="primary" size="small" value={values} onChange={setValues}>
                {config.available(workday).map(e =>
                    <ToggleButton disabled={occupiedTimes.includes(`${dayOfWeek.index}-${e}`)}
                                  key={`${dayOfWeek.index}-${e}`}
                                  value={e}>{e}</ToggleButton>)
                }
            </ToggleButtonGroup>
        </Stack>
    );
}

export default Line;
